
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目睹上线</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
    </style>
    <style>
        .form-drawer {
            position: absolute;
            width: 100%;
            height: 100vh;
            pointer-events: none;
        }
        .form {
            position: absolute;
            max-width: 560px;
            left: -580px;
            height: calc(100vh - 20px);
            overflow-y: auto;
            background-color: #fff;
            padding: 10px;
            transition: all .3s linear;
            pointer-events: all;
        }
        .form .close {
            font-size: 40px;
            position: absolute;
            top: 0;
            right: 20px;
        }
        .form-drawer-expanded .form {
            left: 0;
        }
        .form-drawer .background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            background-color: #000;
            opacity: 0;
            transition: all .3s linear;
        }
        .form-drawer-expanded .background {
            pointer-events: all;
            opacity: .3;
        }
        .form-drawer .form .center {
            text-align: center;
            justify-content: center;
        }

        .form-drawer .form .panel {
            margin-top: 16px;
            border-radius: 5px;
            background: #fff;
            display: inline-block;
            width: 100%;
            box-shadow: 0 0 5px 0px rgba(0, 0, 0, .3);
            position: relative;
        }

        .form-drawer .form .panel-require:after {
            position: absolute;
            top: 6px;
            left: 6px;
            color: #f00;
            content: '*'
        }

        .form-drawer .form .form-item {
            width: 100%;
            display: flex;
            padding: 20px 0;
        }

        .form-drawer .form .form-item-label {
            width: 100px;
        }

        .form-drawer .form .form-item-content {
            flex: 1;
            text-align: left;
        }

        .form-drawer .form input,
        .form-drawer .form select {
            width: 90%;
        }

        .form-drawer .form textarea {
            width: 90%;
            height: 80px;
        }

        @media (max-width: 600px) {

            .form-drawer .form .form-item {
                flex-direction: column;
            }

            .form-drawer .form .form-item-content {
                text-align: center;
            }
        }
    </style>
    <style>
        #app {
            overflow: hidden;;
            /* text-align: center; */
        }
        .table {
            /* border: 1px solid red; */
            /* max-width: 900px; */
            display: inline-block;
        }
        .table-wrap {
            width: 80%;
            margin: 0 auto;
            overflow-x: auto;
            border: 1px solid red;
        }
        .table-header,tr {
            /* display: flex; */
            font-size: 0;
            white-space: nowrap;
        }
        .table-header .th {
            display: inline-block;
            font-weight: 900;
        }
        .table-body {
            font-size: 0;
        }
        .align-center {
            text-align: center;
        }
        .width50 {
            width: 50px;
        }
        .width100 {
            width: 100px;
        }
        .width150 {
            width: 150px;
        }
        .width200 {
            width: 200px;
        }
        .th {
            display: inline-block;
            line-height: 28px;
            vertical-align: middle;
            font-size: 14px;
            width: 100px;
        }
        .tr {
            line-height: 40px;
        }
        .tr:hover {
            background: #f5f5f5;
        }

        .header {
            text-align: center;
            font-size: 28px;
            line-height: 40px;
            margin: 40px 0;
        }
        .header .subtitle {
            font-size: 14px;
        }
        .subtitle {
            margin: 10px;
        }

    </style>
    <style>
        .table-pagination {
            margin-top: 32px;
            text-align: center;
            font-size: 30px;
        }
        .page-group {
            display: inline-block;
        }
        .page-item {
            display: inline-block;;
            border: 1px solid #3232321f;
            padding: 0 4px;
            cursor: pointer;
        }
        .page-item-current {
            background: #f5f5f5;
            cursor: not-allowed;
        }
        .page-navi {
            margin-left: 8px;
            display: inline-block;
        }
        .page-navi input {
            width: 70px;
            height: 28px;
            vertical-align: middle;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="form-drawer" v-bind:class="{ 'form-drawer-expanded': formVisible }">
            <div class="background" @click="setFormVisible(false)"></div>
            <div class="form">
                <div class="close" @click="setFormVisible(false)">Χ</div>
                <h4 class="center">目睹更新(开发填写)</h1>
                <div class="panel panel-require">
                    <div class="form-item">
                        <div class="form-item-label">更新环境: </div>
                        <div class="form-item-content">
                            <select v-model="formValue.env">
                                <option value="">请选择</option>
                                <option value="testservice">测试服</option>
                                <option value="online">线上</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="panel panel-require">
                    <div class="form-item">
                        <div class="form-item-label">更新服务: </div>
                        <div class="form-item-content">
                            <input type="text" v-model="formValue.svcname" placeholder="填写k8s服务名称">
                        </div>
                    </div>
                </div>
                <div class="panel panel-require">
                    <div class="form-item">
                        <div class="form-item-label">更新内容: </div>
                        <div class="form-item-content">
                            <textarea style="" v-model="formValue.content"></textarea>
                        </div>
                    </div>
                </div>
                <div class="panel panel-require">
                    <div class="form-item">
                        <div class="form-item-label">申请人(一般写你自己): </div>
                        <div class="form-item-content">
                            <input type="text" v-model="formValue.person">
                        </div>
                    </div>
                </div>
                <div class="panel panel-require">
                    <div class="form-item">
                        <div class="form-item-label">镜像地址: </div>
                        <div class="form-item-content">
                            <input type="text" v-model="formValue.image">
                        </div>
                    </div>
                </div>
                <div class="panel panel-require">
                    <div class="form-item">
                        <div class="form-item-label">goose更新: </div>
                        <div class="form-item-content">
                            <select v-model="formValue.hasGoose">
                                <option value="">请选择</option>
                                <option value="n">没有goose更新</option>
                                <option value="y">有migrations, 需要goose更新</option>
                            </select>
                            <textarea v-if="formValue.hasGoose === 'y'" v-model="formValue.goose" placeholder="请填写goose需要更新哪些sql文件，以及其他注意事项"
                                style="margin-top: 16px;"></textarea>
                        </div>
                    </div>
                </div>
                <div class="panel panel-require">
                    <div class="form-item">
                        <div class="form-item-label">环境变量更新: </div>
                        <div class="form-item-content">
                            <select v-model="formValue.hasEnvVar">
                                <option value="">请选择</option>
                                <option value="n">没有环境变量更新</option>
                                <option value="y">有环境变量更新</option>
                            </select>
                            <textarea v-if="formValue.hasEnvVar === 'y'" v-model="formValue.envVar" placeholder="如果有环境变量，请列出环境变量名和要设置的值"
                                style="margin-top: 16px;"></textarea>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="form-item">
                        <div class="form-item-label">其他: </div>
                        <div class="form-item-content">
                            <textarea v-model="formValue.other" placeholder="其他更新注意事项，比如要和另一个服务一起/先后更新"></textarea>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="form-item center">
                        <input type="button" @click="submit()"
                            style="background-color:#68a3fa;color: #fff; line-height: 40px; font-size: 20px;" value="提交">
                    </div>
                </div>
            </div>
        </div>

        <div class="header" @click="setFormVisible(true)">
                目睹上线<span class="subtitle">(点此新增)</span>
        </div>

        <div class="table-wrap">
            <div class="table">
                <div class="table-header">
                    <div class="th width50 align-center">id</div>
                    <div class="th width100">job_version</div>
                    <div class="th width150">run_env</div>
                    <div class="th width50">status</div>
                    <div class="th width150">service_name</div>
                    <div class="th width150">update_content</div>
                    <div class="th width100">docker_image</div>
                    <div class="th width100">has_migration</div>
                    <div class="th width100">has_env_variable</div>
                    <div class="th width100">env_variable</div>
                    <div class="th width100">has_ingress</div>
                    <div class="th width100">rollback_step</div>
                    <div class="th width100">commiter</div>
                    <div class="th width100">operator</div>
                    <div class="th th6">detail</div>
                    <div class="th th6">created_at</div>
                    <div class="th th6">updated_at</div>
                    <div class="th th6">操作</div>
                </div>
                <div class="table-body">
                    <div class="tr" v-for="jobItem in jobList">
                        <div class="th width50 align-center">{{jobItem.id}}</div>
                        <div class="th width100">{{jobItem.job_version}}</div>
                        <div class="th width150">{{jobItem.run_env}}</div>
                        <div class="th width50">{{jobItem.status}}</div>
                        <div class="th width150">{{jobItem.service_name}}</div>
                        <div class="th width150">{{jobItem.update_content}}</div>
                        <div class="th width100">{{jobItem.docker_image.split(':').pop() || jobItem.docker_image}}</div>
                        <div class="th width100">{{jobItem.has_migration}}</div>
                        <div class="th width100">{{jobItem.has_env_variable}}</div>
                        <div class="th width100">{{jobItem.env_variable}}</div>
                        <div class="th width100">{{jobItem.has_ingress}}</div>
                        <div class="th width100">{{jobItem.rollback_step}}</div>
                        <div class="th width100">{{jobItem.commiter}}</div>
                        <div class="th width100">{{jobItem.operator}}</div>
                        <div class="th th6">{{jobItem.detail}}</div>
                        <div class="th th6" v-bind:title="jobItem.created_at">{{getRelatedTime(jobItem.created_at)}}</div>
                        <div class="th th6" v-bind:title="jobItem.updated_at">{{getRelatedTime(jobItem.updated_at)}}</div>
                        <div class="th th6">操作</div>
                    </div>
    
                    <!-- <div class="tr" style="border-top: 1px solid red;">
                        <div class="td" style="width: 80px;">总计</div>
                        <div class="td td2" style="width: 120px;" title="channel.name">-</div>
                        <div class="td td3">-</div>
    
                        <div class="td td4">{{countPv}}</div>
                        <div class="td td5">{{countUv}}</div>
                        <div class="td td6">{{countConcurrent}}</div>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="table-pagination">
            <div class="page-group">
                <div v-if="currentPage > 2" class="page-item" @click="handlePageClick(currentPage - 1)">{{currentPage-2}}</div>
                <div v-if="currentPage > 1" class="page-item" @click="handlePageClick(currentPage-1)">{{currentPage-1}}</div>
                <div class="page-item page-item-current">{{currentPage}}</div>
                <div v-if="totalPage > currentPage" class="page-item" @click="handlePageClick(currentPage+1)">{{currentPage+1}}</div>
                <div v-if="totalPage > currentPage + 1" class="page-item" @click="handlePageClick(currentPage+2)">{{currentPage+2}}</div>
            </div>
            <div class="page-navi">
                第 <input type="number" v-model="tempPage" @blur="handleChangePage()"> / {{totalPage}} 页
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var cache=[""," ","  ","   ","    ","     ","      ","       ","        ","         "];function leftPad(e,r,t){if((r-=(e+="").length)<=0)return e;if(t||0===t||(t=" ")," "===(t+="")&&r<10)return cache[r]+e;for(var a="";1&r&&(a+=t),r>>=1;)t+=t;return a+e}
    </script>
    <script>
    
        var app = new Vue({
            el: '#app',
            data: {
                formValue: {
                    env: '',
                    svcname: '',
                    content: '',
                    person: '',
                    image: '',
                    hasGoose: '',
                    goose: '',
                    hasEnvVar: '',
                    envVar: '',
                    other: '',
                },
                formVisible: false,
                currentPage: 1,
                totalJobs: 0,
                totalPage: 0,
                tempPage: 1,
                pageSize: 10,
                jobList: [],
            },

            computed: {
                
            },

            created: function () {
                this.getJobList()
                this.getJobCount()
            },

            methods: {
                handleChangePage () {
                    if (this.tempPage > 0 && this.tempPage <= this.totalPage) {
                        this.currentPage = +this.tempPage
                        this.getJobList()
                    } else {
                        this.tempPage = this.currentPage
                    }
                },
                handlePageClick (page) {
                    this.currentPage = this.tempPage = page
                    this.getJobList()
                },
                getRelatedTime (timeStr) {
                    const d = new Date(timeStr);
                    const dt = d.getTime();
                    const now = Date.now();
                    const offset = now - dt;
                    const minute = 60 * 1000;
                    const hour = 3600 * 1000;
                    const day = 24 * 3600 * 1000;
                    if (offset < minute) {
                        return '刚刚';
                    } if (offset < hour) {
                        return `${Math.round(offset / minute)}分钟前`;
                    } if (offset < day) {
                        return `${Math.round(offset / hour)}小时前`;
                    } if (offset < day * 30) {
                        return `${Math.round(offset / day)}天前`;
                    }
                    const dyear = d.getFullYear();
                    const nowyear = new Date().getFullYear();
                    if (dyear !== nowyear) {
                        const str = `${d.getFullYear()}/${leftPad(d.getMonth() + 1, 2, '0')}/${leftPad(d.getDay(), 2, '0')}`;
                        return str;
                    }
                    const str = `${leftPad(d.getMonth() + 1, 2, '0')}/${leftPad(d.getDay(), 2, '0')}`;
                    return str;
                },
                setFormVisible (visible) {
                    this.formVisible = visible
                },
                getJobCount () {
                    const url = '/mudu_pub/api/get_job_count'
                    return fetch(url)
                        .then(res => res.json())
                        .then(res => {
                            if (res.errcode === 1000) {
                                this.totalJobs = res.count
                                this.totalPage = Math.ceil(this.totalJobs / this.pageSize)
                                console.log('ls', this.totalJobs, this.totalPage)
                            }
                        })
                        .catch(_ => _)
                },
                getJobList () {
                    const url = `/mudu_pub/api/get_jobs?page=${this.currentPage}&page_size=${this.pageSize}`
                    return fetch(url)
                        .then(res => res.json())
                        .then(res => {
                            if (res.errcode === 1000) {
                                this.jobList = res.jobs
                            }
                        })
                        .catch(function () {})
                },
                submit: function () {
                    const formValue = this.formValue
                    if (!formValue.env) {
                        alert('请选择更新环境')
                        return
                    }
                    if (!formValue.svcname) {
                        alert('请填写要更新的服务名称')
                        return
                    }
                    if (!formValue.content) {
                        alert('请填写更新内容')
                        return
                    }
                    if (!formValue.person) {
                        alert('请填写申请人')
                        return
                    }
                    if (!formValue.image) {
                        alert('请填写镜像地址')
                        return
                    }
                    if (!formValue.hasGoose) {
                        alert('请选择是否需要执行goose更新')
                        return
                    }
                    if (formValue.hasGoose === 'y' && !formValue.goose) {
                        alert('请填写goose更新内容')
                        return
                    }
                    if (!formValue.hasEnvVar) {
                        alert('请选择是否需要更新环境变量')
                        return
                    }
                    if (formValue.hasEnvVar === 'y' && !formValue.envVar) {
                        alert('请填写要更新的环境变量')
                        return
                    }

                    var envVar = formValue.hasEnvVar === 'y' ? formValue.envVar : 'none'
                    var goose = formValue.hasGoose === 'y' ? formValue.goose : 'none'
                    var other = formValue.other ? formValue.other : 'none'
                    var product = 'myun'
                    
                    var url = '/update'

                    var data = {
                        product: product,
                        env: formValue.env,
                        svcname: formValue.svcname,
                        image: formValue.image,
                        goose: goose,
                        env_var: envVar,
                        content: formValue.content,
                        other: other,
                        person: formValue.person
                    }

                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    })
                        .then(function (resp) {
                            console.log(resp)
                            if (resp.status === 200) {
                                alert('更新成功')
                                this.getJobCount()
                                this.getJobList()
                            } else {
                                alert('更新失败: ' + resp.status)
                            }
                        })
                }

            }
        })
    </script>
</body>
</html>